<template>
	<view class="main">
		<view class="closeicon " @click="handleClose">	<uni-icons type="close" size="20" ></uni-icons></view>
		<view class="title">
			<text style="font-size: 32rpx;">位置收藏管理</text>
		</view>
		<view class="name">
			<image class="img" src="/static/nofly.png" mode=""></image>
			<text style="font-size: 30rpx;" >{{favorite.name}}</text>
			
		</view>
		<view class="btn-box"  @click="delFavorite">
			<view class="btn"> <text  style="font-size: 28rpx; color: white;" >取消收藏</text></view>
		</view>
	</view>
</template>

<script>
const linli = uniCloud.importObject('linliChat',{customUI:true})
export default {
	name:"favorite",
	props:{
		favorite:{
			type:Object,
			required:true
		},
		favorite_id:{
			type:String,
			required:true
		}
	},
	computed:{
		storeData(){
			return this.$store.state.msg
		}
	},
	data() {
		return { 
			userInfo: {
				name: '用户名称',
				id: '用户ID',
				avatar: 'https://picsum.photos/200/200' // 示例头像
			},
			isAdd: false // 是否已关注
		}
	},
	methods: {
async delFavorite() {
  try {
    // 显示确认对话框
    const res = await uni.showModal({
      title: '确认删除关注？',
      content: ''
    });
  
    // 如果用户确认删除
    if (res[1].confirm) {
      console.log('删除关注');
      
      // 构建请求数据
      const data = {
        favorite_id: this.favorite.favorite_id,
        action: 'remove',
        userId: this.storeData.user.userId
      };
      
      // 调用删除收藏的API
     const res= await  linli.favorite(data);
	   console.log(res);
  	  this.$store.commit('msg/SET_user',{...this.storeData.user,favorite:res.data.favorite})
      this.$emit('reLoadData')
     
      this.$emit('close');
	 }else{
		 uni.showToast({
		 	title:'删除收藏失败'
		 })
	 }
      
      // 更新用户信息
   
    
  } catch (error) {
    console.error('删除收藏失败:', error);
    uni.showToast({
      title: '删除失败，请重试',
      icon: 'none'
    });
  }
},

		handleClose(){
			this.$emit('close')
		}
	}
}
</script>

<style scoped>
.main {
	/* 必须设置flex布局 */
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	
	/* 位置和大小 */
	position: fixed;
	top: 200rpx;
	left: 75rpx;
	width: 600rpx;
	height: 400rpx;
	padding: 50rpx;
	
	/* 背景和边框 */
	background-color: #ffffff;
	border-radius: 32rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.title {
	width: 600rpx;
	justify-content: center;
	align-items: center;
}

.name {
	width: 500rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

}

.btn-box {
	width: 200rpx;
	height: 60rpx;
	
	justify-content: center;
	align-items: center;
	background-color: #aa5500;
	border-radius: 50%;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}
.img{
	width: 40rpx;
	height: 40rpx;
}
.closeicon{
	position: absolute;
	top:10rpx;
	right: 10rpx;
	width: 50rpx;
	height: 50rpx;
}
</style>
